/ https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
- star_styles = "size-[800px] mask mask-star bg-gradient-to-r from-secondary via-cyan-400 to-lime-400"
  ^^^^^^^^^^^    ^^^^^^^^^^^^ ^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^^^^^^^
- crazy_text_styles = "italic font-black bg-gradient-to-r via-60% to-90% from-orange-500 via-secondary to-primary text-transparent bg-clip-text inline-block py-2"
  ^^^^^^^^^^^^^^^^^    ^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^ ^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^

.relative
 ^^^^^^^^
  - # Blurred background star
  .absolute.left-0.z-0{ class: "-top-[400px] -right-[400px]" }
   ^^^^^^^^ ^^^^^^ ^^^  ^^^^^   ^^^^^^^^^^^^ ^^^^^^^^^^^^^^
    .flex.justify-end.blur-3xl
     ^^^^ ^^^^^^^^^^^ ^^^^^^^^
      %div{ class: star_styles }
            ^^^^^  ^^^^^^^^^^^

  .relative.z-10
   ^^^^^^^^ ^^^^
    %h1.mt-8.text-center.text-5xl.font-black.tracking-wide.drop-shadow-lg
        ^^^^ ^^^^^^^^^^^ ^^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^^
      %div
        Components, Guides, and Paradigms
                            ^^^
      .md:inline-flex.md:items-center.justify-center
       ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^
        %span.-mr-2
              ^^^^^
          for
          ^^^
        %span.relative.-rotate-3.hover:-rotate-6.hover:scale-125.transition-transform
              ^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
          %span{ class: crazy_text_styles + " absolute blur-xl" }
                 ^^^^^  ^^^^^^^^^^^^^^^^^     ^^^^^^^^ ^^^^^^^
            &nbsp;CRAZY&nbsp;
          %span{ class: crazy_text_styles + " drop-shadow-[0_0_1px_#fff]" }
                 ^^^^^  ^^^^^^^^^^^^^^^^^     ^^^^^^^^^^^^^^^^^^^^^^^^^^
            &nbsp;CRAZY&nbsp;
        %span.-ml-3.md:-ml-1
              ^^^^^ ^^^^^^^^
          \-fast Development
      %div
        in Ruby on Rails!
        ^^      ^^

    .mt-16.text-center
     ^^^^^ ^^^^^^^^^^^
      = daisy_button "😃 Get Started", css: "btn-primary text-xl",
        ^^^^^^^^^^^^                   ^^^   ^^^^^^^^^^^ ^^^^^^^
        right_icon: "arrow-right", target: "_blank",
        ^^^^^^^^^^   ^^^^^^^^^^^   ^^^^^^
        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
        ^^^^                                                ^^^^^^^^^^^^^^^^^^^^^

    .mt-32.lg:flex.lg:space-x-8
     ^^^^^ ^^^^^^^ ^^^^^^^^^^^^
      %div{ class: "md:basis-2/5" }
            ^^^^^   ^^^^^^^^^^^^
        %h3.text-4xl.font-bold
            ^^^^^^^^ ^^^^^^^^^
          Easy, Flexible Components
        %p.mt-2.text-xl
           ^^^^ ^^^^^^^
          Powered by the fabulous
                  ^^ ^^^ ^^^^^^^^
          = succeed ',' do
            ^^^^^^^     ^^
            = daisy_link("ViewComponent", "https://viewcomponent.org", target: "_blank")
                                                                 ^^^   ^^^^^^
          = succeed ', and' do
            ^^^^^^^    ^^^  ^^
            = daisy_link "DaisyUI", "https://daisyui.com/", target: "_blank"
              ^^^^^^^^^^                                    ^^^^^^
          = daisy_link "TailwindCSS", "https://tailwindcss.com/", target: "_blank"
            ^^^^^^^^^^                                            ^^^^^^
          libraries, our components are designed to be fast, flexible, and easy to
                     ^^^ ^^^^^^^^^^ ^^^ ^^^^^^^^ ^^ ^^                 ^^^ ^^^^ ^^
          use <i>directy</i> in Ruby on Rails!
          ^^^    ^^^^^^^     ^^      ^^

      = doc_example(css: "mt-8 lg:mt-0 lg:basis-3/5 h-44") do
                    ^^^   ^^^^ ^^^^^^^ ^^^^^^^^^^^^ ^^^^   ^^
        .flex.flex-col.sm:flex-row.items-center.gap-4
         ^^^^ ^^^^^^^^ ^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^
          = daisy_button "Accent Button", css: "btn-accent"
            ^^^^^^^^^^^^                  ^^^   ^^^^^^^^^^
          = daisy_tip("Click to Swap") do
                             ^^        ^^
            = daisy_swap off: "🌚", on: "🌞", css: "swap-rotate text-4xl"
              ^^^^^^^^^^ ^^^        ^^        ^^^   ^^^^^^^^^^^ ^^^^^^^^
          = daisy_badge "Large Badge", css: "badge-secondary badge-lg"
            ^^^^^^^^^^^                ^^^   ^^^^^^^^^^^^^^^ ^^^^^^^^


    .mt-32.xl:flex.xl:flex-row-reverse.xl:items-center
     ^^^^^ ^^^^^^^ ^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^
      .text-xl.xl:ml-8
       ^^^^^^^ ^^^^^^^
        %h3.text-4xl.font-bold
            ^^^^^^^^ ^^^^^^^^^
          Simple, Concise Views

        %p.mt-2
           ^^^^
          Utlize
          = daisy_link("HAML", "https://haml.info/", target: "_blank")
                                                     ^^^^^^
          so your views are simple, concise, and easy to understand.
          ^^ ^^^^ ^^^^^ ^^^                  ^^^ ^^^^ ^^ ^^^^^^^^^^

        %p.mt-2
           ^^^^
          No more messy ERB files with all of their closing tags and Ruby wrappers.
             ^^^^ ^^^^^     ^^^^^ ^^^^ ^^^ ^^ ^^^^^ ^^^^^^^ ^^^^ ^^^      ^^^^^^^^
          HAML feels more natural to write and reduces file sizes, making your
               ^^^^^ ^^^^ ^^^^^^^ ^^ ^^^^^ ^^^ ^^^^^^^ ^^^^        ^^^^^^ ^^^^
          views easier to read and maintain.
          ^^^^^ ^^^^^^ ^^ ^^^^ ^^^ ^^^^^^^^

        %p.mt-2
           ^^^^
          :markdown
            **PLUS!** You can utlize filters like _Markdown_, CoffeeScript,
                          ^^^ ^^^^^^ ^^^^^^^ ^^^^
            Textile, and many more!
                     ^^^ ^^^^ ^^^^^

      .mt-8.xl:mt-0
       ^^^^ ^^^^^^^
        .flex.flex-col.xl:flex.xl:flex-row.w-full
         ^^^^ ^^^^^^^^ ^^^^^^^ ^^^^^^^^^^^ ^^^^^^
          = doc_code(css: "grow", code_css: "xl:pl-2 xl:pr-0 xl:rounded-r-none", language: "erb") do
                     ^^^   ^^^^   ^^^^^^^^   ^^^^^^^ ^^^^^^^ ^^^^^^^^^^^^^^^^^   ^^^^^^^^   ^^^   ^^
            :escaped
              <% # Ruby %>

              <% 5.times do |i| %>
                   ^^^^^ ^^
                <% if i.even? %>
                   ^^ ^
                  <p class="odd">Number <%= i %></p>
                     ^^^^^  ^^^             ^
                <% else %>
                   ^^^^
                  <p class="even">Numero <%= i %></p>
                     ^^^^^  ^^^^             ^
                <% end %>
                   ^^^
              <% end %>
                 ^^^

          = doc_code(css: "grow mt-8 xl:mt-0", pre_css: "xl:h-full", code_css: "xl:pl-0 xl:pr-2 xl:h-full xl:rounded-l-none") do
                     ^^^   ^^^^ ^^^^ ^^^^^^^   ^^^^^^^   ^^^^^^^^^   ^^^^^^^^   ^^^^^^^ ^^^^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^^^   ^^
            :escaped
              - # HAML

              - 5.times do |i|
                  ^^^^^ ^^
                - if i.even?
                  ^^
                  %p.odd Number \#{i}
                     ^^^           ^
                - else
                  ^^^^
                  %p.even Numero \#{i}
                     ^^^^           ^


    %h3.mt-32.text-4xl.font-bold
        ^^^^^ ^^^^^^^^ ^^^^^^^^^
      Build Your <i>OWN</i> Components

    %p.mt-2.text-xl
       ^^^^ ^^^^^^^
      Can't find exactly what you need? No problem! Build your own components
          ^ ^^^^ ^^^^^^^ ^^^^ ^^^          ^^^^^^^^       ^^^^ ^^^ ^^^^^^^^^^
      with ease using our simple, flexible, and powerful DSL.
      ^^^^ ^^^^ ^^^^^ ^^^                   ^^^ ^^^^^^^^

    .mt-8.xl:flex.xl:space-x-8
     ^^^^ ^^^^^^^ ^^^^^^^^^^^^
      %div
        = doc_code(language: "ruby") do
                   ^^^^^^^^   ^^^^   ^^
          :escaped
            # app/components/application_component.rb
                                                   ^^
            class ApplicationComponent < LocoMotion::BaseComponent
            ^^^^^
              # Add your custom / shared component logic here!
                    ^^^^ ^^^^^^   ^^^^^^ ^^^^^^^^^ ^^^^^ ^^^^^
            end
            ^^^

        = doc_code(language: "haml", css: "mt-8") do
                   ^^^^^^^^   ^^^^   ^^^   ^^^^   ^^
          :escaped
            - # app/components/character_component.html.haml
            = part(:component) do
                               ^^
              = part(:head)
              = part(:body) do
                            ^^
                = content
                  ^^^^^^^
              = part(:legs)

      %div.mt-8.xl:mt-0
           ^^^^ ^^^^^^^
        = doc_code(language: "ruby") do
                   ^^^^^^^^   ^^^^   ^^
          :escaped
            # app/components/character_component.rb
                                                 ^^
            class CharacterComponent < ApplicationComponent
            ^^^^^
              define_parts :head, :body, :legs
              ^^^^^^^^^^^^

              def before_render
              ^^^ ^^^^^^^^^^^^^
                set_tag_name(:head, :h1)
                ^^^^^^^^^^^^
                add_css(:head, "text-3xl font-bold")
                ^^^^^^^         ^^^^^^^^ ^^^^^^^^^

                set_tag_name(:body, :p)
                ^^^^^^^^^^^^
                add_stimulus_controller(:body, "character-body")
                ^^^^^^^^^^^^^^^^^^^^^^^         ^^^^^^^^^^^^^^
                add_css(:body, "text-lg")
                ^^^^^^^         ^^^^^^^

                set_tag_name(:legs, :footer)
                ^^^^^^^^^^^^
                add_css(:legs, "text-sm")
                ^^^^^^^         ^^^^^^^
              end
              ^^^
            end
            ^^^

    %h3.mt-24.text-center.text-4xl.font-bold.italic
        ^^^^^ ^^^^^^^^^^^ ^^^^^^^^ ^^^^^^^^^ ^^^^^^
      More Coming Soon!
    %p.mt-2.text-xl.text-center
       ^^^^ ^^^^^^^ ^^^^^^^^^^^
      Keen an eye out as we'll be adding more components, guides, and
           ^^ ^^^ ^^^ ^^ ^^ ^^ ^^ ^^^^^^ ^^^^                     ^^^
      %br.max-sm:hidden
          ^^^^^^^^^^^^^
      suggested gems for you to build amazing Rails apps!
      ^^^^^^^^^ ^^^^ ^^^ ^^^ ^^ ^^^^^ ^^^^^^^       ^^^^^
    .mt-4.text-center
     ^^^^ ^^^^^^^^^^^
      = daisy_button "😉 Get Started", css: "btn-primary text-xl",
        ^^^^^^^^^^^^                   ^^^   ^^^^^^^^^^^ ^^^^^^^
        right_icon: "arrow-right", target: "_blank",
        ^^^^^^^^^^   ^^^^^^^^^^^   ^^^^^^
        class: "px-2.5"
        ^^^^^   ^^^^^^
        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
        ^^^^                                                ^^^^^^^^^^^^^^^^^^^^^
